<template>
  <div class="wrapper">
    <div class="title">委托我们</div>
    <!-- <div class="entrust_div"> -->
        <van-tabs v-model="active">
            <van-tab title="我要找店">
              <van-form @submit="onSubmit">
                <van-field
                  v-model="name"
                  left-icon="wode"
                  name="name"
                  :rules="[{ required: true, pattern: hanzi , message: '请输入正确的姓名' }]"
                  placeholder="请输入您的姓名"
                  @change = "Blur"
                >
                    <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="wode"></van-icon>
                </van-field>
                <van-field
                  v-model="mobile"
                  name="mobile"
                  left-icon="shouji"
                  :rules="[{ required: true, pattern: phoneY , message: '请输入正确的手机号' }]"
                  placeholder="请输入您的手机号码"
                  @change = "Blur"
                >
                  <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="shouji"></van-icon>
                </van-field>
                <van-field class="none" value="我要找店" name="type"/>
                <van-field name="city" v-model="city" class="none" />
                <van-field name="from" value="手机站" class="none" />
                <van-button round block type="info" native-type="submit" :class="{action:is_tijiao}">提交</van-button>
                <p class="entrust_p">成功收录 <span>12000</span>家商铺，已成功开店<span>2654</span>家</p>
              </van-form>
            </van-tab>
            <van-tab title="我要转店">
              <van-form @submit="onSubmit">
                <van-field
                  v-model="name"
                  left-icon="wode"
                  name="name"
                  :rules="[{ required: true, pattern: hanzi , message: '请输入正确的姓名' }]"
                  placeholder="请输入您的姓名"
                  @change = "Blur"
                >
                  <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="wode"></van-icon>
                </van-field>
                <van-field
                  v-model="mobile"
                  name="mobile"
                  left-icon="shouji"
                  :rules="[{ required: true, pattern: phoneY , message: '请输入正确的手机号' }]"
                  placeholder="请输入您的手机号码"
                  @change = "Blur"
                >
                  <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="shouji"></van-icon>
                </van-field>
                <van-field class="none" value="我要转店" name="type"/>
                <van-field name="city" v-model="city" class="none" />
                <van-field name="from" value="手机站" class="none" />
                <van-button round block type="info" native-type="submit" :class="{action:is_tijiao}">提交</van-button>
                <p class="entrust_p">成功收录 <span>12000</span>家商铺，已成功开店<span>2654</span>家</p>
              </van-form>
            </van-tab>
        </van-tabs>
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  name: 'CompanyEntrust',
  data () {
    return {
      active: 2,
      name: '',
      mobile: '',
      oshitsukeV: '',
      hanzi: /[\u4e00-\u9fa5]/,
      phoneY: /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/,
      is_tijiao: false,
      city: sessionStorage.getItem('Dcity')
    }
  },
  methods: {
    Blur () {
      if (sessionStorage.getItem('Dcity') === '' || sessionStorage.getItem('Dcity') === null) {
        this.city = '北京'
      } else {
        this.city = sessionStorage.getItem('Dcity')
      }
      if (this.name !== '' && this.mobile !== '') {
        this.is_tijiao = true
      }
    },
    onSubmit (values) {
      this.$axios.post(process.env.API_HOST + '/api/vip/feedback', values
      ).then(this.onSubmitSucc)
        .catch(error => console.log(error))
    },
    onSubmitSucc (res) {
      if (res.data.code === 1) {
        this.$toast('提交成功')
        setTimeout(function () {
          // location.reload()
        }, 1000)
      } else {
        this.$toast('请检查网络后重试')
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  height 100%
  padding 0 .4rem
  margin-bottom .6rem /* 30/50 */
  .title
    height .8rem /* 40/50 */
    line-height .8rem /* 40/50 */
    font-size .4rem /* 20/50 */
    margin-bottom .2rem /* 10/50 */
    font-weight bold
  .van-tabs--line
    width 100%
    height auto
    border-radius 5px
    box-shadow 0px 0px 5px 0px rgba(0, 0, 0, 0.1)
    padding 0 .6rem /* 30/50 */
    /deep/ .van-tabs__wrap
      height 1.08rem /* 54/50 */
      line-height 1.08rem /* 54/50 */
      border-bottom 1px solid #F6360A
      .van-tabs__line
        width 3.14rem /* 157/50 */
        background-color #F6360A
        height 2px
      .van-tab
        font-size .36rem /* 18/50 */
        font-weight bold
        color #333
      .van-tab--active
        color #F6360A
        font-weight bold
  .van-field
    margin-top .3rem /* 15/50 */
    border-bottom 1px solid rgba(0,0,0,.1)
    padding .2rem /* 10/50 */ .06rem /* 3/50 */
    /deep/ .van-field__left-icon
      color #C7C7C7
      margin-right .26rem /* 13/50 */
  .van-field:after
    border-bottom:0
  .van-button--info
    width 100%
    margin-top .7rem /* 35/50 */
    height .9rem /* 45/50 */
    line-height .9rem
    background-color #F8F8F8
    color #999999
    font-size .44rem /* 22/50 */
    border 0px
    border-radius 5px
    font-weight: 500
  .action
    background linear-gradient(90deg, #F14510, #EE340F)
    box-shadow 1px 1px 5px 0px rgba(255, 1, 1, 0.42)
    color #fff
  .entrust_p
    font-size .26rem /* 13/50 */
    color #666
    line-height .72rem /* 36/50 */
    text-align center
    margin-bottom .28rem /* 14/50 */
    font-weight: 500
    span
      color #F20E0E
      margin-left .06rem /* 3/50 */
      margin-right .06rem /* 3/50 */
</style>
